<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传组件演示</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }

        h2 {
            color: #666;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
            margin: 30px 0 20px 0;
        }

        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background: #fafafa;
        }

        .demo-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .demo-description {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .code-example {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
        }

        .log-output {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
            margin: 20px 0;
            max-height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }

        .log-entry {
            margin: 2px 0;
            padding: 2px 5px;
            border-radius: 3px;
        }

        .log-info {
            color: #0c5460;
        }

        .log-success {
            color: #155724;
        }

        .log-error {
            color: #721c24;
        }

        .log-warning {
            color: #856404;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>文件上传组件演示</h1>
        <p style="text-align: center; color: #666;">
            基于封装的 <code>FileUploadComponent</code> 类，提供简单易用的文件上传功能
        </p>
    </div>

    <!-- 基础用法 -->
    <div class="container">
        <div class="demo-section">
            <div class="demo-title">1. 基础文件上传</div>
            <div class="demo-description">
                最简单的用法，支持小文件直接上传和大文件分片上传。
            </div>

            <div class="code-example">
                // 创建组件实例
                const uploader1 = new FileUploadComponent();

                // 在容器中创建上传按钮
                uploader1.createUploadButton(container);
            </div>

            <div id="demo1"></div>
        </div>
    </div>

    <!-- 自定义配置 -->
    <div class="container">
        <div class="demo-section">
            <div class="demo-title">2. 自定义配置上传</div>
            <div class="demo-description">
                自定义按钮文本、文件类型限制、分片大小等配置。
            </div>

            <div class="code-example">
                const uploader2 = new FileUploadComponent({
                maxSmallFileSize: 20 * 1024 * 1024, // 20MB
                defaultChunkSize: 2 * 1024 * 1024, // 2MB
                maxConcurrency: 2
                });

                uploader2.createUploadButton(container, {
                buttonText: '选择图片上传',
                accept: 'image/*',
                category: 'image',
                showPreview: true
                });
            </div>

            <div id="demo2"></div>
        </div>
    </div>

    <!-- 多文件上传 -->
    <div class="container">
        <div class="demo-section">
            <div class="demo-title">3. 多文件上传</div>
            <div class="demo-description">
                支持同时选择多个文件进行上传，显示文件预览。
            </div>

            <div class="code-example">
                uploader3.createUploadButton(container, {
                buttonText: '选择多个文件',
                multiple: true,
                showPreview: true,
                showProgress: true
                });
            </div>

            <div id="demo3"></div>
        </div>
    </div>

    <!-- 回调事件处理 -->
    <div class="container">
        <div class="demo-section">
            <div class="demo-title">4. 事件回调处理</div>
            <div class="demo-description">
                监听上传进度、成功、失败等事件，实现自定义处理逻辑。
            </div>

            <div class="code-example">
                const uploader4 = new FileUploadComponent({
                onProgress: (data) => { /* 进度处理 */ },
                onSuccess: (data) => { /* 成功处理 */ },
                onError: (error) => { /* 错误处理 */ },
                onStatusChange: (status) => { /* 状态变化 */ }
                });
            </div>

            <div id="demo4"></div>
            <div id="log4" class="log-output"></div>
        </div>
    </div>

    <!-- 编程式上传 -->
    <div class="container">
        <div class="demo-section">
            <div class="demo-title">5. 编程式上传</div>
            <div class="demo-description">
                不创建UI，直接通过JavaScript代码控制文件上传。
            </div>

            <div class="code-example">
                // 选择文件
                &lt;input type="file" id="fileInput5"&gt;
                &lt;button id="uploadBtn5"&gt;开始上传&lt;/button&gt;

                // JavaScript
                document.getElementById('uploadBtn5').onclick = async () => {
                const file = document.getElementById('fileInput5').files[0];
                if (file) {
                try {
                const result = await uploader5.uploadFile(file, {
                category: 'document'
                });
                console.log('上传成功:', result);
                } catch (error) {
                console.error('上传失败:', error);
                }
                }
                };
            </div>

            <input type="file" id="fileInput5">
            <button id="uploadBtn5"
                style="margin-left: 10px; padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">开始上传</button>
            <div id="log5" class="log-output"></div>
        </div>
    </div>

    <!-- 引入依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.2/spark-md5.min.js"></script>
    <!-- 引入文件上传组件 -->
    <script src="file-upload-component.js"></script>

    <script>
        // 日志工具函数
        function addLog(containerId, message, type = 'info') {
            const logContainer = document.getElementById(containerId);
            if (logContainer) {
                const logEntry = document.createElement('div');
                logEntry.className = `log-entry log-${type}`;
                logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
                logContainer.appendChild(logEntry);
                logContainer.scrollTop = logContainer.scrollHeight;
            }
        }

        // Demo 1: 基础文件上传
        const uploader1 = new FileUploadComponent();
        uploader1.createUploadButton(document.getElementById('demo1'));

        // Demo 2: 自定义配置上传
        const uploader2 = new FileUploadComponent({
            maxSmallFileSize: 20 * 1024 * 1024, // 20MB
            defaultChunkSize: 2 * 1024 * 1024,  // 2MB分片
            maxConcurrency: 2
        });

        uploader2.createUploadButton(document.getElementById('demo2'), {
            buttonText: '选择图片上传',
            accept: 'image/*',
            category: 'image',
            showPreview: true
        });

        // Demo 3: 多文件上传
        const uploader3 = new FileUploadComponent();
        uploader3.createUploadButton(document.getElementById('demo3'), {
            buttonText: '选择多个文件',
            multiple: true,
            showPreview: true,
            showProgress: true
        });

        // Demo 4: 事件回调处理
        const uploader4 = new FileUploadComponent({
            onProgress: (data) => {
                if (data.type === 'small') {
                    addLog('log4', `小文件上传进度: ${data.progress}%`, 'info');
                } else if (data.type === 'chunk') {
                    addLog('log4', `分片上传进度: ${data.progress}% (${data.completedChunks}/${data.totalChunks})`, 'info');
                }
            },
            onSuccess: (data) => {
                addLog('log4', `上传成功: ${data.originalName} (${data.fileSizeFormatted})`, 'success');
            },
            onError: (error) => {
                addLog('log4', `上传失败: ${error.message}`, 'error');
            },
            onStatusChange: (status) => {
                const statusMap = {
                    'preparing': '准备中',
                    'uploading': '上传中',
                    'completed': '已完成',
                    'error': '上传失败',
                    'paused': '已暂停',
                    'cancelled': '已取消'
                };
                addLog('log4', `状态变化: ${statusMap[status] || status}`, 'warning');
            }
        });

        uploader4.createUploadButton(document.getElementById('demo4'), {
            buttonText: '上传并查看事件日志',
            showProgress: true
        });

        // Demo 5: 编程式上传
        const uploader5 = new FileUploadComponent({
            onProgress: (data) => {
                if (data.type === 'small') {
                    addLog('log5', `上传进度: ${data.progress}%`, 'info');
                } else if (data.type === 'chunk') {
                    addLog('log5', `分片进度: ${data.progress}% (${data.completedChunks}/${data.totalChunks})`, 'info');
                }
            },
            onSuccess: (data) => {
                addLog('log5', `上传成功: ${data.originalName}`, 'success');
            },
            onError: (error) => {
                addLog('log5', `上传失败: ${error.message}`, 'error');
            }
        });

        document.getElementById('uploadBtn5').onclick = async () => {
            const file = document.getElementById('fileInput5').files[0];
            if (!file) {
                alert('请先选择文件');
                return;
            }

            addLog('log5', `开始上传文件: ${file.name}`, 'info');

            try {
                const result = await uploader5.uploadFile(file, {
                    category: 'document'
                });
                addLog('log5', `文件ID: ${result.fileId}`, 'success');
            } catch (error) {
                addLog('log5', `上传异常: ${error.message}`, 'error');
            }
        };
    </script>
</body>

</html>